import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useModel } from 'umi';
import { CpasIcon } from '~/public/cpas-ui';
import { Row, Col, Popover } from 'antd';
import styles from './style/index.less';
import SetDataGrid from '../SetDataGrid';
import EditorPop from './components/EditorPop';
import { getDateList, getInformationList } from './service';
import { rTimes } from '@/utils';

const GroupPart = () => {
    const { initialState } = useModel('@@initialState');
    const { zcbfid } = initialState?.curPart as API.CurPart;

    const [state, setStates] = useState<any>([])
    const tplDialogRef = useRef<any>(); // 模板
    const setDataGridRef = useRef<any>();

    const getInformationData = async () => {
        const res = await getInformationList({ zcbfid });
        setStates(res);
    };
    const Divstyle: React.CSSProperties = { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', };

    useEffect(() => {
        getInformationData();
        setDataGridRef.current.restYearTable();
    }, [zcbfid])

    // const dataupdate = useCallback((value: boolean) => {
    //     console.log(value, '(e: any) => void-----');

    //     if (value) getData();
    // }, [])

    const EditorClick = () => {
        // getData();
        tplDialogRef.current.show({
            args: {
                title: '组成部分信息',
                codes: true,
                data: state[0]
            },
            okCallback: () => {
                console.log("点击确定----");
                setTimeout(() => {
                    getInformationData()
                }, 200)

            },
        });
    }
    const contents = (e: any) => {
        return <>{e}</>
    }

    const GridRefresh = (value: boolean) => {
        if (value) {
            setDataGridRef.current.restYearTable();
            setDataGridRef.current.restYearAllData();
        }
    }


    return (
        <div className={styles.container} style={{ borderRight: '1px solid #d8d8d8' }}>
            <Row align="middle">
                <Col span={24} className={styles.title}>
                    <div style={{ display: "flex", alignItems: "center" }}>
                        组成部分信息
                        <span className={styles.Icon_CopyStyle}> <CpasIcon type={"icon-rename-copy"} onClick={EditorClick} /></span>
                    </div>

                </Col>
            </Row>
            <Row className={styles.footer}>
                <Col span={24} className={styles.ListTitle}>
                    <div className={styles.ListTitle}>
                        <div style={{
                            width: "49%", height: "100%", display: "flex", alignContent: "center",
                            justifyContent: " space-around",
                            flexDirection: "column"
                        }}>
                            <span style={Divstyle}>被审计单位：
                                <Popover content={contents(state[0]?.bsdw)} placement="bottom">
                                    {state[0]?.bsdw}
                                </Popover>
                            </span>
                            <span style={Divstyle}>报告批准报出日期：
                                <Popover content={contents(state[0]?.AuditReportDate ? rTimes(state[0]?.AuditReportDate) : state[0]?.AuditReportDate)} placement="bottom">
                                    {state[0]?.AuditReportDate ? rTimes(state[0]?.AuditReportDate) : state[0]?.AuditReportDate}
                                </Popover>
                            </span>
                            <span style={Divstyle}>被审计单位简称：
                                <Popover content={contents(state[0]?.shortName)} placement="bottom">
                                    {state[0]?.shortName}
                                </Popover>
                            </span>
                            <span style={Divstyle}>报告类型：
                                <Popover content={contents(state[0]?.ReportType ?? "-")} placement="bottom">
                                    {state[0]?.ReportType ?? "-"}
                                </Popover>
                            </span>
                        </div>

                        <div style={{
                            width: "49%", height: "100%", display: "flex", alignContent: "center",
                            justifyContent: " space-around",
                            flexDirection: "column", marginLeft: "15px"
                        }}>
                            <span style={Divstyle}>报告模板：
                                <Popover content={contents(state[0]?.AuditReportTemplate)} placement="bottom">
                                    {state[0]?.AuditReportTemplate}
                                </Popover>
                            </span>
                            <span style={Divstyle}>审计年度：
                                <Popover content={contents(state[0]?.sjnd)} placement="bottom">
                                    {state[0]?.sjnd}
                                </Popover>
                            </span>
                            <span style={Divstyle}>收件人：
                                <Popover content={contents(state[0]?.ReceivePerson)} placement="bottom">
                                    {state[0]?.ReceivePerson}
                                </Popover>
                            </span>
                        </div>
                    </div>

                </Col>
                {/* <Col span={24} className={styles.Form}>
                <SetDataGrid data={perioddata} width='91.5%' height='100%' dataupdate={dataupdate} />
            </Col> */}
            </Row>
            <SetDataGrid ref={setDataGridRef} width='91.5%' height='100%' button={false} />
            <EditorPop ref={tplDialogRef} GridRefresh={GridRefresh} width={1100} height={480} />
        </div>
    )
}

export default React.memo(GroupPart);